<template>
  <div style="width: 800px; margin: 0 auto;">
	  <a-form-model
	    ref="ruleForm"
	    :model="form"
	    :rules="rules"
	    :label-col="labelCol"
	    :wrapper-col="wrapperCol"
	  >
	    <a-form-model-item ref="name" label="输入框" prop="name">
	      <a-input
	        v-model="form.name"
	        @blur="
	          () => {
	            $refs.name.onFieldBlur();
	          }
	        "
	      />
	    </a-form-model-item>
	   <!-- <a-form-model-item ref="address" label="地址" prop="address">
	      <a-input
			id="suggestId"
	        v-model="form.address"
	        @blur="
	          () => {
	            $refs.address.onFieldBlur();
	          }
	        "
	      />
	    </a-form-model-item> -->
	    <a-form-model-item label="选择" prop="region">
	      <a-select v-model="form.region" placeholder="请选择">
	        <a-select-option value="shanghai">
	          选项一
	        </a-select-option>
	        <a-select-option value="beijing">
	          选项二
	        </a-select-option>
	      </a-select>
	    </a-form-model-item>
			<a-form-item label="多选选择">
			 <a-select mode="tags" style="width: 100%" :token-separators="[',']" @change="handleChange">
			     <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
			       选项{{ i }}
			     </a-select-option>
			   </a-select>
			</a-form-item>
	    <a-form-model-item label="时间选择" required prop="date1">
	      <a-date-picker
	        v-model="form.date1"
	        show-time
	        type="date"
	        placeholder="选择时间"
	        style="width: 100%;"
	      />
	    </a-form-model-item>
	    <a-form-model-item label="开关" prop="delivery">
	      <a-switch v-model="form.delivery" />
	    </a-form-model-item>
	    <a-form-model-item label="多选" prop="type">
	      <a-checkbox-group v-model="form.type">
	        <a-checkbox value="1" name="type">
	          选项一
	        </a-checkbox>
	        <a-checkbox value="2" name="type">
	          选项二
	        </a-checkbox>
	        <a-checkbox value="3" name="type">
	          选项三
	        </a-checkbox>
	      </a-checkbox-group>
	    </a-form-model-item>
	    <a-form-model-item label="单选" prop="resource">
	      <a-radio-group v-model="form.resource">
	        <a-radio value="1">
	          选项一
	        </a-radio>
	        <a-radio value="2">
	          选项二
	        </a-radio>
	      </a-radio-group>
	    </a-form-model-item>
	    <a-form-model-item label="文本域(可拉伸)" prop="desc">
	      <a-input v-model="form.desc" type="textarea" />
	    </a-form-model-item>
		 <a-form-model-item
			label="新增的输入框" 
		      v-for="(domain, index) in form.domains"
		      :key="domain.key"
		    >
			<!-- v-bind="index === 0 ? formItemLayout : {}" -->
		      <a-input
		        v-model="domain.value"
		        placeholder="请输入"
		        style="width: 60%; margin-right: 8px"
		      />
		      <a-icon
		        v-if="form.domains.length > 1"
		        class="dynamic-delete-button"
		        type="minus-circle-o"
		        :disabled="form.domains.length === 1"
		        @click="removeDomain(domain)"
		      />
		    </a-form-model-item>
		 <a-form-model-item label="新增输入框" >
			  <a-button type="dashed" style="width: 60%" @click="addDomain">
				<a-icon type="plus" /> 点击新增
			  </a-button>
			</a-form-model-item>
		 <a-form-model-item label="服务评分" >
			  <a-rate :default-value="5" allow-half />
			</a-form-model-item>
		 <a-form-model-item label="上传文件" >
			  <a-upload
			   action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
			   list-type="picture"
			   :default-file-list="fileList"
			 >
			   <a-button> <a-icon type="upload" /> 点击上传 </a-button>
			 </a-upload>
			</a-form-model-item>
	    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
	      <a-button type="primary" @click="onSubmit">
	        提交
	      </a-button>
	      <a-button style="margin-left: 10px;" @click="resetForm">
	        重置
	      </a-button>
	    </a-form-model-item>
	  </a-form-model>
  </div>
</template>
<script>
// import BMap from 'BMap'
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: '',
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
		domains:[],
		address:[],
      },
	   fileList: [
		  {
			uid: '-1',
			name: 'xxx.png',
			status: 'done',
			url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
			thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
		  },
		],
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        region: [{ required: true, message: '请选择', trigger: 'change' }],
        date1: [{ required: true, message: '请选择', trigger: 'change' }],
        type: [
          {
            type: 'array',
            required: true,
            message: '请选择',
            trigger: 'change',
          },
        ],
        resource: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        desc: [{ required: true, message: '请选择', trigger: 'blur' }],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
			 this.$message.success('提交成功')
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
	 removeDomain(item) {
	      let index = this.form.domains.indexOf(item);
	      if (index !== -1) {
	        this.form.domains.splice(index, 1);
	      }
	    },
	    addDomain() {
	      this.form.domains.push({
	        value: '',
	        key: Date.now(),
	      });
	    },
  },
  mounted() {
  	this.$nextTick(function () {
  	
  	    var th = this
  	    // 创建Map实例
  	    var map = new BMap.Map("allmap");
  	    // 初始化地图,设置中心点坐标，
  	    var point = new BMap.Point(102.747542,25.114095); // 创建点坐标
  	    map.centerAndZoom(point, 12);
  	    map.enableScrollWheelZoom();
  	    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
  	        {
  	            "input": "suggestId"
  	            , "location": map
  	        })
  	    var myValue
  	    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
  	        var _value = e.item.value;
  	        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  	        this.address_detail = myValue
  	        setPlace();
  	    });
  	
  	    function setPlace() {
  	        map.clearOverlays();    //清除地图上所有覆盖物
  	        function myFun() {
  	            th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
  	            map.centerAndZoom(th.userlocation, 18);
  	            map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
  	        }
  	
  	        var local = new BMap.LocalSearch(map, { //智能搜索
  	            onSearchComplete: myFun
  	        });
  	        local.search(myValue);
  	
  	        //测试输出坐标（指的是输入框最后确定地点的经纬度）
  	        map.addEventListener("click",function(e){
  	            //经度
  	            console.log(th.userlocation.lng);
  	            //维度
  	            console.log(th.userlocation.lat);
  	
  	        })
  	    }
  	
  	})
  }
};
</script>
